#{extends 'main.html' /}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert Edit Relation Page</title>

<!-- this html is for the edit relation as the updateRelation()
     takes the ID of the currentTutorial and the new titlr and the new relation
     the click done to update it in the DB
     @author Yasmin Gamal -->
</head>
<body>
	<form action="@{Tutorials.updateRelation()}" method="POST">
		<input name="tutID" style="display: none;" value=${currentTut.id}></input>
		#{ifnot relation}
		<p>No Titles yet..</p>
		#{/ifnot} #{list items:relation,as:'relations'}
		<ul>

			<li>The Title of the Tutorial : ${relations.TutorialTitle.raw()}
				</br> The type of relation: &nbsp;&nbsp;${relations.relType.raw()}
				&nbsp;&nbsp; </br> The Related Tutorial :
				&nbsp;&nbsp;${relations.relatedTutTitle.raw()}

			</li>
		</ul>
		#{/list} If you want to choose another related tutorial if not choose
		the same related title: <select name="otherTitle" id="mySelect">
			#{ifnot Tutorials}
			<p>No tutorials yet..</p> #{/ifnot} #{list
			items:Tutorials,as:'TutorialTitle'}
			<ul>
				Title of the Tutorial :
				</br>
				<option>
					<li><p>${TutorialTitle.Title.raw()}</p></li>
				</option>
			</ul> #{/list}
			</br>
		</select> And if you want to change the relation type if not choose the same
		relation type: <select name="type" id="mytype">
			<option>similar</option>
			<option>replace</option>
			<option>required to</option>
			<option>required for</option>
			<option>part of</option>
		</select> <input type="submit" value="Done Editing" />

	</form>

	<!-- This function is for confirming that the user really wants to delete the relation
 @author Nourhan Elmalahy -->
	<script type="text/javascript">
		function confirmation() {
			var answer = confirm("Do you want to delete this relation?")
			if (answer) {
				alert("You have deleted the relation successfully")
				return true
			} else {
				return false
			}
		}
	</script>

	<form action="@{Tutorials.deleteRelations()}" method="POST">
		<input name="tutorialId" style="display: none;" value=${currentTut.id}></input>
		<input type="submit" onClick="return confirmation()"
			value="Delete Relation" />
	</form>
	<!-- End Nourhan Elmalahy -->
</body>
</html>